<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <!--    导入自己的css文件-->
    <link rel="stylesheet" href="../css/my-css.css">
    <style>
        .el-main {
            width: 1200px;
            margin: 0 auto;
        }

        .reg_form {
            width: 375px;
        }

        .title_p {
            height: 40px;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container>
        <my-header></my-header>
        <el-main style="margin-top: 30px">
            <el-carousel :interval="2000" type="card" height="375px">
                <el-carousel-item v-for="banner in bannerArr">
                    <img :src="banner.imgUrl" width="100%">
                </el-carousel-item>
            </el-carousel>

            <el-row style="background-color: white">
                <el-col span="3">
                    <p style="font-size: 28px;line-height: 65px;margin: 0">学习笔记</p>
                </el-col>
                <el-col span="21">
                    <!--食谱导航开始-->
                    <el-menu mode="horizontal" @select="recipeSelect" default-active="0" active-text-color="orange">
                        <el-menu-item index="0">全部</el-menu-item>
                        <el-menu-item v-for="c in recipeCategoryArr"
                                      :index="c.id">{{c.name}}
                        </el-menu-item>

                    </el-menu>
                    <!--食谱导航结束-->
                </el-col>
            </el-row>
            <!--食谱列表开始-->
            <el-row gutter="20">
                <el-col v-for="r in recipeArr" span="6">
                    <el-card style="margin: 10px 0">
                        <a style="color: #333;text-decoration: none"
                           :href="'/detail.html?id='+r.id">
                            <img :src="r.imgUrl" width="100%" height="144">
                            <p class="title_p">{{r.title}}</p>
                        </a>
                        <el-row gutter="20">
                            <el-col span="4">
                                <!--圆形图片,专门用来显示头像-->
                                <el-avatar size="small" :src="r.userImgUrl"></el-avatar>
                            </el-col>
                            <el-col span="10">{{r.nickName}}</el-col>
                            <el-col span="10">
                                <span style="float: right;font-size: 12px;color: #ccc">{{r.categoryName}}</span>
                            </el-col>
                        </el-row>
                    </el-card>
                </el-col>
            </el-row>
            <div style="text-align: center;margin-bottom: 20px">
                <el-button @click="location.href='/contentList.html?type=1'">点击查看更多笔记</el-button>
            </div>
            <!--食谱列表结束-->
            <!--食谱结束-->
        </el-main>
        <my-footer></my-footer>
    </el-container>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<!--引入axios框架文件-->
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
<!--导入自己的头部js文件-->
<script src="../js/my-header.js"></script>
<!--导入自己的尾部js文件-->
<script src="../js/my-footer.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                bannerArr: [],
                recipeCategoryArr: [],
                recipeArr: [],
            }
        },
        methods: {
            recipeSelect(key, keyPath) {
                this.loadContent(1, key);
            },
            videoSelect(key, keyPath) {
                this.loadContent(2, key);
            },
            infoSelect(key, keyPath) {
                this.loadContent(3, key);
            },
            loadContent(type, categoryId) {
                //发请求获取某个类型下某个分类的数据
                axios.get("/v1/contents/" + type + "/" + categoryId + "/index")
                    .then(function (response) {
                        if (response.data.code == 1) {
                            switch (type) {
                                case 1://食谱
                                    v.recipeArr = response.data.data;
                                    console.log(response.data.data)
                                    break;
                                case 2://视频
                                    v.videoArr = response.data.data;
                                    break;
                                case 3://资讯
                                    v.infoArr = response.data.data;
                                    break;
                            }
                        }
                    })
            }
        },

        created() {
            axios.get("/v1/banners/selectAllBanner").then(response => {
                if (response.data.code == 20000) {
                    v.bannerArr = response.data.data;
                }
            })
            //请求食谱相关分类数据
            axios.get("/v1/categories/1/sub").then(function (response) {
                if (response.data.code == 1) {
                    v.recipeCategoryArr = response.data.data;
                }
            })
            //请求视频相关分类数据
            axios.get("/v1/categories/2/sub").then(function (response) {
                if (response.data.code == 1) {
                    v.videoCategoryArr = response.data.data;
                }
            })
            //请求资讯相关分类数据
            axios.get("/v1/categories/3/sub").then(function (response) {
                if (response.data.code == 1) {
                    v.infoCategoryArr = response.data.data;
                }
            })

            //请求全部数据
            this.loadContent(1, 0);
            this.loadContent(2, 0);
            this.loadContent(3, 0);
        }
    })
</script>
</html>